<!DOCTYPE html>
<html>
<head>
    <title>ARCEONE</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <link href="css/bootstrap.css" rel="stylesheet" media="screen">
    <link href="css/style.css" rel="stylesheet" media="screen">
    <link href="css/animate.min.css" rel="stylesheet" media="screen">
    <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
      <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->

    
  </head>
  <body>
    <div class="search-bg" data-bind="attr: {class: (appViewModel.current() == 'arama')? 'search-bg animated bounceInLeft': 'search-bg animated bounceOutLeft'}">
      <div class="saerch_item_holder">
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <h2>Arama Formu</h2>
        <form class="form-search">
          <input autocomplete="off" id="search" type="text" class="search-query" placeholder="Arama" rel="popover" data-content="Arama yaparken aşağıdaki arama kutucuğunu kullanabilirsiniz. Arama kriterlerinizi <strong>,</strong> (virgül) ile ayırabilirsiniz. Bir yeri aramak istiyorsanız arama kriterinizin başına <strong>@</strong> işareti koyabilirsiniz. Bunun dışında aramanızın eğer özel bir ihlal olduğunu düşünüyorsanız başına <strong>#</strong> işareti koyabilirsiniz. Dilerseniz bir zaman aralığı verebilir ve bunun için <strong>:</strong> işaretini kullanabilir ve ihlalin derecesini ise <strong>!</strong> işaretini başına koyarak düşük, orta, yüksek, çokyüksek şeklinde belirtebilirsiniz.
          <h6>Örnek arama sorgusu</h6>
          @besiktas,t:16.10.1982-21.12.2012,#yol,#ışık,!yüksek" data-original-title="Arama İpuçları" data-trigger="focus" data-placement="right" data-html="true">
          <div class="well sidebar-nav" style="margin-top: 5px;" data-bind="visible: autocomplete">
            <ul class="nav nav-list" id="autocomplete_area">
            </ul>
          </div>
        </form>
        Şu anki yeriniz aşağıda işaretlenmiştir. Farklı bir yeri incelemek istiyorsanız aşağıdaki haritadan işaretlemeniz yeterli olacaktır.
        <div class="search_map" id="search_map">
        </div>
        <br>
        <div id="seaech_address_preview">
        </div>
        <br>
        <div class="btn pull-right" style="margin-bottom: 15px;" id="search_cancel">Vazgeç</div>
        <div class="btn btn-primary pull-right" style="margin-bottom: 15px;" id="search_submit">Onayla</div>
      </div>
    </div>
    <div class="left-bg">
        <div class="top-bar container-fluid">
        <div class="row-fluid">
          <a class="logo-top" href="#/"><img src="img/logo.png" /></a>
          <span class="pull-right">
            <div class="btn-group">
              <a class="btn dropdown-toggle" data-toggle="dropdown">
                <i class="icon icon-list"></i>
              </a>
              <ul class="dropdown-menu">
                <li class="active yeniler" data-bind="attr: {class: (appViewModel.current() == 'home')? 'active yeniler': 'yeniler'} "><a href="#/">Yakınımdakiler</a></li>
                <li class="kategoriler" data-bind="attr: {class: (current == 'harita')? 'active kategoriler': 'kategoriler'} "><a href="#/harita" >Harita Görünümü</a></li>
                <li class="tablo" data-bind="if: isAdmin ,attr: {class: (current == 'tablo')? 'active tablo': 'tablo'} "><a href="#/Tablo">Tablo Görünümü</a></li>
              </ul>
            </div>
            <a href="#/arama" class="btn">
              <i class="icon icon-search"></i>
            </a>
            <a href="#/problem_bildir" class="btn btn-primary" data-bind="visible: loggedin">
              <i class="icon icon-pencil"></i>
            </a>
          </span>
        </div>
      </div>
    </div>
    <div class="navigation-bottom">
      <div class="container-fluid">
        <div class="row-fluid">
          <span class="pull-right" data-bind="visible: !loggedin()">
            <a href="#/kayit" class="btn btn-primary btn-mini"><i class="icon icon-pencil icon-white"></i> Kayıt ol</a>
            <a href="#/login" class="btn btn-success btn-mini"><i class="icon icon-user icon-white"></i> Giriş</a>
          </span>
          <span class="pull-right" data-bind="visible: loggedin" style="display:none;">
            <a href="#/profilim" class="btn btn-primary btn-mini"><i class="icon icon-user icon-white"></i> Bilgilerim</a>
            <a href="#/logout" class="btn btn-danger btn-mini"><i class="icon icon-off icon-white"></i> Çıkış</a>
          </span>
        </div>
      </div>
    </div>
    <div class="container-fluid">
    <div class="row-fluid">
      <div class="menu span3 affix">
        <!--Sidebar content-->
        <a class="logo" href="#/"><img src="img/logo.png" /></a>
        <a href="#/problem_bildir" class="btn btn-primary btn-large btn-block" style="margin-bottom: 15px;" data-bind="visible: loggedin">İhlal Bildir</a>
        <a href="#/arama" class="btn btn-large btn-block" style="margin-bottom: 15px;">İhlal Ara</a>
          <div class="well sidebar-nav">
            <ul class="nav nav-list">
              <li class="active yeniler" data-bind="attr: {class: (appViewModel.current() == 'home')? 'active yeniler': 'yeniler'} "><a href="#/">Yakınımdakiler</a></li>
              <li data-bind="attr: {class: (appViewModel.current() == 'harita')? 'active kategoriler': 'kategoriler'} "><a href="#/harita">Harita Görünümü</a></li>
              <li data-bind="if: isAdmin ,attr: {class: (appViewModel.current() == 'tablo')? 'active tablo': 'tablo'} "><a href="#/tablo">Tablo Görünümü</a></li>
            </ul>
          </div><!--/.well -->
          <div class="well sidebar-nav followed_list" data-bind="visible: loggedin && followedViolations().length>0">
            <div class="sidebar-title">Takip ettiklerim</div>
            <hr>
            <ul class="nav nav-list" data-bind="foreach: followedViolations">
              <li><a href="#/" data-bind="text: title, attr: { href: '#/pop/'+id}">Yeniler</a></li>
            </ul>
          </div><!--/.well -->
        </div><!--/span-->
        <div id="main" class="span9 offset3"></div>
        <div id="harita" class="span9 offset3"></div>
      </div>
    </div>
  </div>
    <div id="modal_with_action" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="ModalLabel">Modal header</h3>
      </div>
      <div class="modal-body">
        
      </div>
      <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">Vazgeç</button>
        <button class="btn btn-primary submit">Gönder</button>
      </div>
    </div>


    <div id="modal_with_content" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
          <h3 id="ModalLabel">Modal header</h3>
        </div>
      <div class="modal-body">
        
      </div>
    </div>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script src="js/bootstrap.js"></script>
    <script src="js/wookmark.js"></script>
	<script src="js/sammy.js"></script>
	<script src="js/sammy.template.js"></script>
	<script src="js/knockout.js"></script>
  <script src="js/md5.js"></script>
	<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true"></script>
	<script src="js/script.js"></script>
  </body>
</html>